<template>
  <div class="page flex items-center justify-center">
    <div class="left">
      <img style="width: 400px" src="@/assets/login-bg.svg" />
    </div>
    <div class="right">
      <el-card>
        <template #header>
          <div class="app-name">欢迎使用行尽江南后台管理系统</div>
        </template>
        <el-form :model="formModel" size="large">
          <el-form-item prop="username">
            <el-input v-model="formModel.username" placeholder="输入用户名">
              <template #prefix>
                <el-icon class="el-input__icon"><user /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              maxlength="16"
              minlength="6"
              v-model="formModel.password"
              placeholder="输入密码"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex items-center">
              <el-input length="6" v-model="formModel.code" placeholder="输入验证码">
                <template #prefix>
                  <el-icon class="el-input__icon"><cpu /></el-icon>
                </template>
              </el-input>
              <img
                class="img-code ml-3 cursor-pointer"
                :src="imageCode"
                alt="img-code"
                @click="getImageCode"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loginSubmit" :loading="loginSaving">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { ElMessage, ElMessageBox } from 'element-plus'
import { inject, onBeforeMount, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

var appStore = useAppStore()
var router = useRouter()

var loginSaving = ref(false)

// 登录表单
var formModel = reactive({
  username: '',
  password: '',
  code: '',
  sign: ''
})

/**
 * 提交登录信息
 */
const loginSubmit = async () => {
  try {
    if (!formModel.username || !formModel.password) {
      ElMessage.error('输入用户名或密码')
      return
    }
    if (!formModel.code) {
      ElMessage.error('输入图形验证码')
      return
    }
    loginSaving.value = true
    await appStore.login(formModel)
    router.push({ path: '/' })
    loginSaving.value = false
  } catch (error) {
    loginSaving.value = false
    getImageCode()
  }
}
const _api: any = inject('_api')
const imageCode = ref('')
const getImageCode = () => {
  _api({ url: 'imageCode' }).then((res: { data: any }) => {
    imageCode.value = res.data.image
    formModel.sign = res.data.sign
  })
}
onBeforeMount(() => {
  getImageCode()
})
</script>

<style scoped lang="scss">
.page {
  height: 100vh;
  min-height: 600px;
  min-width: 1100px;
  .right,
  .left {
    padding: 0 50px;
  }
  .app-name {
    font-size: 20px;
    color: $theme-color;
  }

  .img-code {
    height: var(--el-component-size-large);
  }
}
</style>
